@ -1,249 +0,0 @@
<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-07 14:34:01
 * @LastEditors: 胡威 3749920422@qq.com
 * @LastEditTime: 2024-02-27 10:48:01
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\evaluate\components\safety\chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white p-2">
    <h3 class="text-center mb-1 font-weight-bold" style="font-size: 0.427rem;">{{ info.companyName }}</h3>
    <div class="text-center my-2 font-weight-bold" style="font-size: 0.533rem;">{{ info.totalScore }}</div>
    <div class="text-center my-1 font-weight-bold">排名第{{ info.rank }}名，{{ info.compareBefore }}</div>
    <!--    <div class="text-center my-1 font-weight-bold">排名第{{ info.rankNum }}名，较上一期<b class="text-danger">下降1名</b></div>-->
    <div class="text-center my-1">评分时间：{{ info.scoringTime }}</div>
    <!--    }<b class="text-primary ml-1" >查看评分明细</b>-->
    <div id="radarChart" ref="radarChart" style="height: 300px;" />
    <customTitle :is-line="true" bg-color="#3795ff" title="历史评分记录">
      <template #right>
        <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="currenYear" @change="HistoryChartPort()" />
      </template>
    </customTitle>
    <div id="lineChart" ref="lineChart" style="height: 260px;" />
    <div class="listInner">
      <div v-if="listData.length > 0" class="common_list" style="padding: 0">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="showPopup(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <ul>
                <li>
                  <i class="iconfont c-text-warning">&#xe6b6;</i>
                  <div class="label">排名：</div>
                  <div class="value">{{ item.rank }}{{ item.compareBefore?`（${item.compareBefore}）` : '/' }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-primary">&#xe727;</i>
                  <div class="label">得分：</div>
                  <div class="value">{{ item.totalScore?item.totalScore:'/' }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-success">&#xe685;</i>
                  <div class="label">评分时间：</div>
                  <div class="value">{{ item.scoringTime?item.scoringTime:'/' }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">评分明细</div>
      <div class="pop-vertical-flex" style="height:calc(100% - 1.2rem)">
        <div class="pop-content">
          <scoreInfo v-if="show" :params="scoreParams" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import customTimer from '@/components/common/custom-timer.vue'
import { lineChart } from '@/utils/chart'
import { currentTime } from '@/utils/dayJs'
import commonList from '@/assets/mixin/commonList'
import scoreInfo from './scoreInfo.vue'
import { pagePort } from './config.js'
import Highcharts from 'highcharts/highcharts'
import HighchartsMore from 'highcharts/highcharts-more'

HighchartsMore(Highcharts)
export default {
  components: {
    customTimer,
    scoreInfo
  },
  mixins: [commonList],
  inject: ['layout'],
  data() {
    return {
      currenYear: currentTime('年'),
      listData: [],
      show: false,
      recordList: [],
      info: {},
      loadNum: 0,
      scoreParams: {},
      radarChart: null
    }
  },
  computed: {
    configField() {
      return `${this.$route.query.current}`
    },
    getPort() {
      return pagePort[this.configField] ?? false
    }
  },
  mounted() {
    this.info = this.$route.query
    this.BasicPort()
    this.HistoryChartPort()
  },
  methods: {
    async BasicPort() {
      this.layout.showAreaLoading(['#radarChart'])
      const { status, data } = await this.getPort.BasicPort({
        companyId: this.$route.query.companyId,
        scoreTime: this.$route.query.scoreTime
      })
      if (status === 0 && data) {
        this.initRadarChart(data)
        this.closeLoading()
      }
      this.layout.hideAreaLoading(['#radarChart'])
    },
    async HistoryChartPort() {
      this.layout.showAreaLoading(['#lineChart'])
      const { status, data } = await this.getPort.HistoryChartPort({
        companyId: this.$route.query.companyId,
        scoreYear: this.currenYear
      })
      if (status === 0 && data) {
        this.listData = data
        this.initLineChart(data)
        this.closeLoading()
      }
      this.layout.hideAreaLoading(['#lineChart'])
    },
    closeLoading() {
      this.loadNum++
      if (this.loadNum >= 3) {
        this.layout.hideLoading()
      }
    },
    initRadarChart(data) {
      const dataArr = []; const maxArr = []; const minArr = []; const xArr = []
      data.forEach(v => {
        xArr.push(v.classaIndexName)
        dataArr.push(v.avgScore)
        maxArr.push(v.maxScore)
        minArr.push(v.minScore)
      })
      const options = {
        credits: { enabled: false },
        chart: {
          polar: true,
          type: 'line'
        },
        title: {
          text: '',
          x: -80
        },
        plotOptions: {
          line: {
            events: {
              legendItemClick: function(e) {
                return false
              }
            }
          }
        },
        pane: {
          size: '60%'
        },
        xAxis: {
          categories: xArr,
          tickmarkPlacement: 'on',
          lineWidth: 0
        },
        yAxis: {
          gridLineInterpolation: 'polygon',
          lineWidth: 0,
          min: 0,
          max: this.$ldh.max(maxArr),
          tickInterval: this.$ldh.max(maxArr) / 5,
          alternateGridColor: '#f3f3f3'
        },
        tooltip: {
          shared: true,
          useHTML: true,
          pointFormat: '<span style="color:{series.color};font-size:14px">{series.name}: <b>{point.y:,.0f}</b><br/>'
        },
        legend: {
          align: 'center',
          verticalAlign: 'bottom',
          y: -35,
          layout: 'horizontal'
        },
        series: [{
          name: '企业得分',
          data: dataArr,
          pointPlacement: 'on',
          color: '#409EFF'
        }, {
          name: '集团最高',
          data: maxArr,
          pointPlacement: 'on',
          color: '#67C23A'
        }, {
          name: '集团最低',
          data: minArr,
          pointPlacement: 'on',
          color: '#F56C6C'
        }]
      }
      if (data.length > 0) {
        this.radarChart = Highcharts.chart('radarChart', options)
      } else {
        this.radarChart = null
        this.layout.chartNoData(this.$refs.radarChart)
      }
      // const indicatorData = []
      // const average = []
      // data.map(v => {
      //   average.push(v.avgScore)
      //   indicatorData.push({ text: v.classaIndexName, max: 100 })
      // })
      // const params = {
      //   center: ['50%', '45%'],
      //   indicator: indicatorData,
      //   legendBottom: 0,
      //   seriesData: [
      //     {
      //       name: '',
      //       type: 'radar',
      //       data: [{
      //         value: average,
      //         itemStyle: {
      //           color: '#00aaff'
      //         },
      //         name: '集团得分'
      //       }]
      //     }
      //   ]
      // }
      // const chart = this.$refs.radarChart
      // if (chart) {
      //   if (data.length > 0) {
      //     const myChart = this.$echarts.init(chart)
      //     myChart.setOption(radarChart(params), true)
      //     window.addEventListener('resize', () => {
      //       myChart.resize()
      //     })
      //   } else {
      //     // chart.removeAttribute('_echarts_instance_')
      //     this.layout.chartNoData(chart)
      //   }
      // }
    },
    initLineChart(data) {
      const dataX = data.map(val => val.scoringTime)
      const dataSeries = [{
        name: '历史评分记录',
        type: 'line',
        data: data.map(val => val.totalScore),
        itemStyleColor: '#00aaff',
        lineStyleColor: '#00aaff'
      }]
      const params = {
        legendShow: false,
        tooltipShow: true,
        gridRight: '5%',
        gridTop: '12%',
        gridLeft: '0%',
        gridBottom: '12%',
        rotate: 30
      }
      const chart = this.$refs.lineChart
      if (chart) {
        if (dataX && dataX.length > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(lineChart(dataX, dataSeries, params))
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
        }
      }
    },
    // 评分面板
    showPopup(row) {
      console.log('row', row)
      this.show = true
      this.scoreParams = { scoreTime: this.$route.query.scoreTime, ...row }
    }
  }
}
</script>

<style lang="scss" scoped>
.customTimer {
  margin: 0;
  width: 2.133rem;
  border: 1px solid #3795ff;
  border-radius: 0.106rem;
  ::v-deep .timer-box .down {
    color: #3795ff;
  }
}
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }
  .pop-content {
    background-color: #fff;
    margin: 0 0.25rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}

</style>
<style lang="scss">
.highcharts-label{
  span{
    font-size: 14px!important;
  }
}
</style>
